<template>
	<view class="content">
		<view class="top">
			<customHeader></customHeader>
			<!-- <customSearch></customSearch> -->
		</view>
		<view class="center">
			<!-- <customSidebar :data="sideList"></customSidebar> -->
			<view class="iconfont">
				<u-icon class="icon" name="shopping-cart" size="48" @click="handleEnter"></u-icon>
				<text class="num"> {{shopCarList.length > 99 ? '99+' : shopCarList.length}} </text>
			</view>
			
			<view class="right_content">
				<scroll-view :scroll-top="0" scroll-y="true" class="scroll_content">
					<view class="pro_content">

						<view class="top_content">
							<image 
								mode="scaleToFill"
								:src="mainUrl ? mainUrl : '../../static/none.png'">
							</image>
							<view class="right_content" style="font-size: 40rpx; font-weight: 700; display: flex; flex-direction: column; justify-content: space-between;">
								<view>
									<view class="nowrap" style="width: 1140rpx; ">
										货号名称：{{ dataMap.name }}
									</view>
									<view style=" color: #dddddd; display: flex; margin: 20rpx 0;">
										<view >货号: {{ dataMap.no }}</view>
										<!-- <view style="margin-left: 60rpx;">装箱数量: {{ dataMap.quantity }}</view> -->
										<view style="margin-left: 60rpx;">装箱数量: {{ dataMap.units }}</view>
									</view>
									<!-- <view>供货价: {{ dataMap.price }}元/{{ dataMap.unit_text }}</view> -->
									<view style="display: flex; align-items: center;  justify-content: space-between;">
										<view>批发价: {{ dataMap.wholesale }}元/{{ dataMap.unit_text }}</view>
										<view>总现货: {{ dataMap.totalStock }}</view>
										<view>可用现货: {{ dataMap.avlStock }}</view>
									</view>
									<u--textarea 
										style="width: 1060rpx; height: 310rpx;border: 1rpx solid #000;margin: 20rpx 0; "
										v-model="dataMap.remark"  
										disabled
										placeholder="" 
										maxlength="-1"
										height="158"
									></u--textarea>
								</view>

								<view style="display: flex; justify-content: center; margin-left: 200rpx;">
									<view style="display: flex; border: 1rpx solid #000;align-items: center; justify-content: space-between; width: 500rpx;">
										<u-button @click="handleMinus">
											<u-icon  size="25" name="minus"></u-icon>
										</u-button>
										<!-- <view style="font-size: 50rpx;"> {{ num }} </view> -->
										<!-- <view style="font-size: 50rpx;"> {{ num }} </view> -->
										<input style="text-align: center;" type="number" v-model.number="num" />
										<!-- <u-button @click="handleAdd" style="margin-left: 20rpx;"> -->
										<u-button @click="handleAdd" >
											<u-icon  size="25" name="plus"></u-icon>
										</u-button>
									</view>
									<!-- <u-button @click="handleAddCar" style="margin-left: 20rpx; width: 100rpx;">
										<u-icon name="shopping-cart" size="48"></u-icon>
									</u-button> -->
								</view>
							</view>
						</view>

						<view class="bottom_content">
							<view v-if="imgList.length" class="left_img">
								<u-button  @click="handleArrow('1')" style="width: 50rpx; height: 240rpx; margin-right: 15rpx; background: #f3f3f3; z-index: 10;">
									<u-icon size="25" name="arrow-left"></u-icon>
								</u-button>

								<scroll-view :scroll-with-animation="true" scroll-x="true" style="white-space: nowrap; width: 870rpx;" :scroll-left="scrollLeft" scrollbar="none" :show-scrollbar="true">
									<view 
										style="margin-right: 10rpx; display: inline-block;" 
										@click="handleImg(index)"
										v-for="(item, index) in imgList"
										:key="index" >
										<view class="image_wrapper">
											<image 
												style="width: 240rpx; height: 240rpx;"
												:class="item.active ? 'item_img' : ''"
												mode="scaleToFill"
												:src="item.url">
											</image>
											<!-- 白色蒙版 -->
											<view class="overlay" :class="item.active ? 'item_img_overlay' : ''"></view>
										</view>
									</view>
								</scroll-view>
								<u-button @click="handleArrow('2')" style="width: 50rpx; height: 240rpx; margin-left: 15rpx; background: #f3f3f3;">
									<u-icon  size="25" name="arrow-right"></u-icon>
								</u-button>
							</view>
							<view class="rigth_btn">
								<u-button @click="handleSure('xd')" style="background: #f59a23; color: #fff;">立即下单</u-button>
								<u-button @click="handleShopCar" style="background: #f59a23; color: #fff;">购物车</u-button>
								<u-button @click="handlePopup" style="background: #f59a23; color: #fff;">已选清单</u-button>
							</view>
							
						</view>

					</view>
				</scroll-view>
			</view>
		</view>


		<!-- 弹出框-下单 -->
		<uni-popup ref="orderPopup" type="center" :mask-click="false">
            <view class="popup_content">

				<!-- 下单页面  开始 -->
				<view v-if="kehuType == 'xd'" style="flex: 1; overflow: auto;" >
					<view style="display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">客户名称：</text>
							<customDownSearch
								style="flex: 1; height: 30rpx; font-size: 30rpx;"
								:options="KehuListCom"
								:value="form.kehuName"
								v-model="form.kehuName"
								@changeInput="changeInput"
								@input="handleInput"
							></customDownSearch>
						</view>

						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">联系人：</text>
							<input v-model.number="form.user" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">联系电话：</text>
							<input v-model.number="form.phone" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						
					</view>

					<view style="display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">客户地址：</text>
							<input v-model="form.kehuAddress" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">拖运地址：</text>
							<input v-model="form.tuoyunAddress" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
					</view>

					<view style="display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="white-space: nowrap; font-size: 40rpx; font-weight: 700;">经手人：</text>
							<customDownSearch
								style="flex: 1; height: 60rpx; font-size: 30rpx;"
								:options="kdPersonListCom"
								:value="form.kdyw"
								v-model="form.kdyw"
								@changeInput="changeInput2"
								@input="handleInput2"
							></customDownSearch>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">订单备注：</text>
							<input v-model="form.input_Remark" style=" flex: 1; font-size: 30rpx;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">附加说明：</text>
							<customDownSearch
								style="flex: 1; height: 30rpx; font-size: 30rpx;"
								:options="dictionListCom"
								:value="form.additional"
								v-model="form.additional"
								@changeInput="changeInput5"
								@input="handleInput5"
							></customDownSearch>
						</view>
						
					</view>

					<view style="display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">收款账户：</text>
							<customDownSearch
								style="flex: 1; height: 30rpx; font-size: 30rpx;"
								:options="queryListCom"
								:value="form.new_account_type"
								v-model="form.new_account_type"
								@changeInput="changeInput4"
								@input="handleInput4"
							></customDownSearch>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">收款金额：</text>
							<input type="digit" v-model="form.collection_je" style=" flex: 1; font-size: 30rpx;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">优惠金额：</text>
							<input type="digit" v-model="form.discounts_je" style=" flex: 1; font-size: 30rpx;"></input>
						</view>
						
					</view>


					<!-- <view  v-if="kehuType" style="display: flex; justify-content: center; align-content: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<text style="font-size: 40rpx; font-weight: 700;">收款方式：</text>
						<customDownSearch
							style="flex: 1; height: 30rpx; font-size: 30rpx;"
							:options="receiveWayListCom"
							:value="form.new_collection_way"
							v-model="form.new_collection_way"
							@changeInput="changeInput7"
							@input="handleInput7"
						></customDownSearch>
					</view> -->

					<!-- <view  v-if="kehuType" style="display: flex; justify-content: center; align-content: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<text style="font-size: 40rpx; font-weight: 700;">收款类型：</text>
						<customDownSearch
							style="flex: 1; height: 30rpx; font-size: 30rpx;"
							:options="receivePayListCom"
							:value="form.new_collection_type"
							v-model="form.new_collection_type"
							@changeInput="changeInput6"
							@input="handleInput6"
						></customDownSearch>
					</view> -->

				</view>

				<!-- 下单页面  结束 -->


				<!-- 新增客户  开始 -->
				<view v-if="kehuType == 'addUser' "  style=" flex: 1; overflow: auto; " >
					<view style="display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">客户编号：</text>
							<input v-model="form.khbh" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">客户名称：</text>
							<input v-model="form.kehuNameAdd" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">联系人：</text>
							<input v-model.number="form.user" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						
					</view>

					<view style="display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">客户地址：</text>
							<input v-model="form.kehuAddress" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">拖运地址：</text>
							<input v-model="form.tuoyunAddress" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
					</view>


					<view style="display: flex; justify-content: center; align-items: center; border-bottom: 1rpx solid #ccc; padding: 20rpx 0;">
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">联系电话：</text>
							<input v-model.number="form.phone" style="padding: 0 40rpx 0 0; flex: 1;"></input>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="white-space: nowrap; font-size: 40rpx; font-weight: 700;">客户等级：</text>
							<view style="flex: 1; height: 60rpx; font-size: 30rpx;">
								<customDownSearch
									:options="gradeListCom"
									:value="form.kehuGrade"
									v-model="form.kehuGrade"
									@changeInput="changeInput3"
									@input="handleInput3"
									></customDownSearch>
									<!-- :disabled="true" -->
							</view>
						</view>
						<view style=" display: flex; justify-content: center; align-items: center; width: 100%; " >
							<text style="font-size: 40rpx; font-weight: 700;">所属区域：</text>
							<input v-model="form.fromArea" style=" flex: 1; font-size: 30rpx;"></input>
						</view>
					</view>
				
				</view>
				<!-- 新增客户  结束 -->


				<view class="bottom_btn">
					<u-button @click="handleSureInfo" >
						{{ kehuType == 'xd' ? '确认' :  kehuType == 'addUser' ?  '保存' : '挂单' }}
					</u-button>
					<u-button v-if="['xd', 'gd'].includes(kehuType)"  @click="changeType" >添加新客户</u-button>
				</view>

				<view v-if="showToast" class="toast">
					{{ showToastStr }}
				</view>

				<text @click="closeOrderPopup" class="iconfont icon-guanbi"></text>
            </view>
		</uni-popup>

		<!-- 已选清单弹出框 -->
		<u-popup  :show="showPopup" @close="showPopup = false" @open="showPopup = true" mode="right">
			<view style="width: 1200rpx; height: 100%; background: #fff; padding: 10rpx">
				<!-- 表头 -->
				<t-table  class="none" style="width: calc(100% - 30rpx);">
					<t-tr  class="none" >
						<t-th class="none">序号</t-th>
						<t-th style="flex:0 0 600upx;" class="none">名称</t-th>
						<t-th class="none">下单数量</t-th>
						<t-th class="none">下单单价</t-th>
						<t-th class="none">下单金额</t-th>
					</t-tr>
				</t-table>

				<!-- 中间 -->
				<scroll-view :scroll-top="0" scroll-y="true" style="width: 100%; height: calc(100vh - 200rpx);" >
					<t-table class="none">
						<view style="background: #fff;">
							<t-tr style="background: #fff;" class="none" v-for="(item, index) in shopCarList" :key="index" >
								<t-th class="none">
									{{ index+1 }}
								</t-th>
								<t-th style="flex:0 0 600upx;" class="none table_name">
									<view class="bao_td_left">
										{{ item.name }}
									</view>
								</t-th>
								<t-th class="none">
									{{ item.num }}
								</t-th>
								<t-th class="none">
									<!-- {{ item.price }} -->
									{{ item.wholesale }}
								</t-th>
								<t-th class="none">
									<!-- {{ (item.num * (item.price * 10000000)) / 10000000 }} -->
									{{ (item.num * item.wholesale).toFixed(2) }}
								</t-th>
							</t-tr>
						</view>
					</t-table>
				</scroll-view>
				<t-table class="none" style="width: calc(100% - 30rpx); padding-bottom: 10rpx; margin-top: 20rpx;">
					<t-tr class="none" >
						<t-th style="flex:0 0 600upx;" class="none">合计：</t-th>
						<t-th  class="none"></t-th>
						<t-th class="none" style="color: red;">{{ sumCom }}</t-th>
						<t-th class="none"></t-th>
						<t-th class="none" style="color: red;">{{ amountCom.toFixed(2) }}</t-th>
					</t-tr>
				</t-table>


			</view>
		</u-popup>

	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'

import customHeader from '@/components/custom-header/custom-header.vue'
import customSearch from '@/components/custom-search/custom-search.vue'
import customSidebar from '@/components/custom-sidebar/custom-sidebar.vue'
import customDownSearch from '@/components/custom-downSearch/custom-downSearch.vue'
import tTable from '@/components/t-table/t-table.vue'
import tTh from '@/components/t-table/t-th.vue'
import tTr from '@/components/t-table/t-tr.vue'
import tTd from '@/components/t-table/t-td.vue'

import { huohaoDetails, getAddOrder, getAddCustom } from '@/api/modules/index.js'
import { getKehuList, getKdPersonList, getGradeList, getQueryAccts, getDiction, getCollect } from '@/api/modules/select.js'
import { BASE_URL_IMG } from "@/api/config"

function debounce  (func, wait) {  
  let timeout;  
  return function() {  
    const context = this;  
    const args = arguments;  
    if (timeout) clearTimeout(timeout);  
    timeout = setTimeout(function() {  
      func.apply(context, args);  
    }, wait);  
  };  
}
	const createtime = getNowFormatDate()
	function getNowFormatDate() {
		// 获取当前日期
		const currentDate = new Date();
		// 格式化为 'YYYY-MM-DD' 格式
		return currentDate.toISOString().split('T')[0];
	}

	export default {
		components:{
			customHeader, 
			customSearch,
			customSidebar,
			customDownSearch,
			tTable,
		    tTh,
		    tTr,
		    tTd,
		},
		data() {
			return {
				num: 1,
				imgList: [],
				selectIndex: 0,
				scrollLeft: 0, // 滚动条添加过渡效果
				showPopup: false, // 清单弹出框
				textareaVal: '123123123',

				dataMap: {}, // 保存返回数据
				mainUrl: '',

				kehuType: '', // 判断弹出层是新客还是老客
				form: {
					khbh: '', // 客户编号
					kehuName: '', // 客户名
					kehuNameAdd: '', // 新客户
					phone: '',
					kehuAddress: '', // 客户地址
					tuoyunAddress: '', // 拖运地址
					kdyw: '', // 经手人
					kehuGrade: '', // 客户等级
					fromArea: '', // 所属区域
					input_Remark: '', // 订单备注
					user: '', // 联系人
					additional: '', // 附加说明
					new_account_type: '', // 收款账户
					new_collection_type: '', // 收款类型
					new_collection_way: '', // 收款方式
					collection_je: '', // 收款金额
					discounts_je: '', // 优惠金额
				},

				showToast: false, // 消息展示框
				showToastStr: '', // 提示框内容
				timer: '', // 展示毫秒数

				debouncedGetKehu: debounce(this.getKehu, 500),  // 客户名称 防抖
				debouncedKdPerson: debounce(this.getKdPerson, 500),  // 经手人 防抖
				debouncedGrad: debounce(this.getGrad, 500),  // 客户等级 防抖
				debouncedQuery: debounce(this.getQuery, 500),  // 收款账户 防抖
				debouncedDiction: debounce(this.getDictionaries, 500),  // 附加说明 防抖
				jsrDefault: '', // 经手人 默认值
				createtime, // 订单创建时间
			}
		},
		onLoad(r) {
			this._getDetail(JSON.stringify({ id: r.param }))

			this.getKehu()
			this.getKdPerson()
			this.getGrad()
			this.getQuery()
			this.getCollectType()
			this.getCollectWay()
			this.getDictionaries()
			let { name } = uni.getStorageSync('userInfo').length ? JSON.parse(uni.getStorageSync('userInfo')) : {}
			this.jsrDefault = name || ''
		},
		computed: {
			KehuListCom(){
				let arr = [];
				 (this.KehuList || []).forEach(i => {
					let newName = i.no + ' - ' + i.name
					arr.push(newName)
				 })
				 return arr
			},
			kdPersonListCom(){
				let arr = [];
				 (this.kdPersonList || []).forEach(i => {
					arr.push(i.name)
				 })
				 return arr
			},
			gradeListCom(){
				let arr = [];
				 (this.gradeList || []).forEach(i => {
					arr.push(i.text)
				 })
				 return arr
			},
			queryListCom() {
				let arr = [];
				 (this.queryList || []).forEach(i => {
					let newName = i.name
					arr.push(newName)
				 })
				 return arr
			},
			receivePayListCom() {
				let arr = [];
				 (this.receivePayList || []).forEach(i => {
					let newName = i.text
					arr.push(newName)
				 })
				 return arr
			},
			receiveWayListCom() {
				let arr = [];
				 (this.receiveWayList || []).forEach(i => {
					let newName = i.text
					arr.push(newName)
				 })
				 return arr
			},
			dictionListCom() {
				let arr = [];
				 (this.dictionList || []).forEach(i => {
					let newName = i.text
					arr.push(newName)
				 })
				 return arr
			},
			...mapState(['sideList', 'shopCarList', 'KehuList', 'kdPersonList', 'gradeList', 'queryList', 'dictionList', 'areaList', 'receivePayList', 'receiveWayList']),
			...mapGetters(['sumCom', 'amountCom']),
		},
		methods: {
			async handleSureInfo() { // 确认 或者 保存
				const { description, bh, id, price, remark, wholesale } = this.dataMap
				console.log('== 22 ', this.dataMap)
				if (this.kehuType  == 'xd') { // 老客户

					if (!this.form.kehuName) {
						uni.showToast({
							title: '请输入客户名称',
							icon: 'none',
							duration: 1500
						})
						return
					}

					if (!this.form.kdyw) {
						uni.showToast({
							title: '请输入经手人',
							icon: 'none',
							duration: 1500
						})
						return
					}

					if (!this.form.kehuAddress) {
						uni.showToast({
							title: '请输入客户地址',
							icon: 'none',
							duration: 1500
						})
						return
					}
					let je = Number(this.form.collection_je) || 0
					if ( this.form.new_account_type && je <= 0) {
						uni.showToast({
							title: '请输入收款金额',
							icon: 'none',
							duration: 1500
						})
						return
					}

					let receipt = {
						company_id: this.KehuList.filter(i => this.form.kehuName.includes(i.name))[0]?.id, // 客户 id
						payType_id: this.receivePayList.find(i => i.text == this.form.new_collection_type )?.id || '' , // 收款类型
						payMethod_id: this.receiveWayList.find(i => i.text == this.form.new_collection_way )?.id || '', // 收款方式
						skje: this.form.collection_je || 0, // 收款金额
						yhje: this.form.discounts_je || 0, // 优惠金额
						createtime: this.createtime, // 创建时间
						acct: this.form.new_account_type, // 收款账户
						user_id: this.kdPersonList.filter(i => i.name == this.form.kdyw)[0]?.id,// 制单人 就是取经手人
						type_ipad: 'new',
					}
					let param = {
						customer_id: this.KehuList.filter(i => this.form.kehuName.includes(i.name))[0]?.id, // 客户 id
						bizman_id: this.kdPersonList.filter(i => i.name == this.form.kdyw)[0]?.id, // 业务员 id
						phone: this.form.phone, 
						address: this.form.kehuAddress, // 客户地址
						address2: this.form.tuoyunAddress, // 拖运地址
						pri: 'wmssop_01',  
						area: this.form.area,
						user: this.form.user,  

						submit: true, //true提交订单，false保存订单
						remark: this.form.input_Remark, // 订单备注
						additional: this.form.additional, // 附加说明
						account_name: this.form.new_account_type, // 收款账户
						sorderis: [
							{
								materiel_id: id, // 产品 id
								yquantity: this.num, // 数量
								wholesale,
								remark
							}
						], 
						receipt,
					}
					console.log('== param ', param)
					const res = await getAddOrder( JSON.stringify(param))
					
					const { data: { status, message } } = res || {}

					if (status == 'success') {
						uni.showToast({
							title: '下单成功',
							icon: 'none',
							duration: 1500
						})
						setTimeout(() => {
							this.$refs.orderPopup.close()
						}, 1500)
						this.form = {} // 清空表单
					} else if (status == 'fail') {
						uni.showToast({
							title: message,
							icon: 'none',
							duration: 1500
						})
					}
					
				} else if (this.kehuType == 'addUser') {  // 新客户
					
					if (!this.form.kehuNameAdd) {
						uni.showToast({
							title: '请输入客户名称',
							icon: 'none',
							duration: 1500
						})
						return
					}
					if (!this.form.phone) {
						uni.showToast({
							title: '请输入联系电话',
							icon: 'none',
							duration: 1500
						})
						return
					}

					let pattern = /^1[3-9]\d{9}$/;
					if (!pattern.test(this.form.phone)) {
						uni.showToast({
							title: '电话号码输入不正确',
							icon: 'none',
							duration: 1500
						})
						return
					}

					if (!this.form.user) {
						uni.showToast({
							title: '请输入联系人',
							icon: 'none',
							duration: 1500
						})
						return
					}

					if (!this.form.kehuAddress) {
						uni.showToast({
							title: '请输入客户地址',
							icon: 'none',
							duration: 1500
						})
						return
					}

					if (!this.form.tuoyunAddress) {
						uni.showToast({
							title: '请输入拖运地址',
							icon: 'none',
							duration: 1500
						})
						return
					}
					if (!this.form.kehuGrade) {
						uni.showToast({
							title: '请输入客户等级',
							icon: 'none',
							duration: 1500
						})
						return
					}
					if (!this.form.fromArea) {
						uni.showToast({
							title: '请输入所属区域',
							icon: 'none',
							duration: 1500
						})
						return
					}

					let param = {
						level_id: this.gradeList.filter(i => this.form.kehuGrade == i.text)[0].id, // 等级id
						level_no: this.gradeList.filter(i => this.form.kehuGrade == i.text)[0].no, // 等级编号
						level_text: this.form.kehuGrade, // 等级名称
						no: this.form.khbh, // 客户编号
						name: this.form.kehuNameAdd, // 客户名称
						addresses: [{
							area: this.form.fromArea, // 所属区域
							phone: this.form.phone, // 联系电话
							address: this.form.kehuAddress, // 客户地址
							address2: this.form.tuoyunAddress, // 拖运地址
							deft: true, // 默认参数
							user: this.form.user, // 联系人
						}]
					}

					const res = await getAddCustom( JSON.stringify(param) );
					console.log("res == 保存 返回--", res)

					const { data: { status } } = res || {}

					if (status == 'success') {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 1500
						})
						let param = {
							paging: {
								pageIndex: 1,
								pageSize: -1,
							},
							query: {
								type_nos: ["customer"],
								valid: true,
								search: '', // 搜索字段
							},
						}
						const res1 = await getKehuList(JSON.stringify(param))
						const { data: { data } } = res1 || {}
						this.comKehu(data.companys)
						setTimeout(() => {
							this.$refs.orderPopup.close()
						}, 1500)
					} else {
						uni.showToast({
							title: '保存失败',
							icon: 'none',
							duration: 1500
						})
					}
				}
			},
			handleShopCar() {
				if (this.num <= 0) {
					uni.showToast({
						title: '数量不能小于0',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				let arr = [{
					...this.dataMap,
					num: Number(this.num),
					check: false,
					showGift: false, // 添加是否是赠品
				}]
				this.addShopCar(arr)
			},
			changeType() {  // 新老客户切换
				this.kehuType = 'addUser'
				this.form = {
					kehuName: '', // 客户名
					kehuNameAdd: '', // 新客户
					phone: '',
					kehuAddress: '', // 客户地址
					tuoyunAddress: '', // 拖运地址
					kdyw: '', // 经手人
					kehuGrade: '', // 客户等级
					fromArea: '', // 所属区域
					user: '', // 联系人
					additional: '', // 附加说明
					new_account_type: '', // 收款账户
					new_collection_type: '', // 收款类型
					new_collection_way: '', // 收款方式
					collection_je: '', // 收款金额
				}
			},
			handleSure(type) { // 显示弹出框
				const { wholesale } = this.dataMap || {}
				if (!this.num) {
					uni.showToast({
						title: '数量不能小于0',
						duration: 2000,
						icon: 'none'
					});
					return
				}

				let sum = (Number(wholesale) || 0) * (Number(this.num) || 0)
				this.kehuType = type
				this.form = {
					kehuName: '', // 客户名
					kehuNameAdd: '', // 新客户
					phone: '',
					kehuAddress: '', // 客户地址
					tuoyunAddress: '', // 拖运地址
					kdyw: this.jsrDefault, // 经手人
					kehuGrade: '', // 客户等级
					fromArea: '', // 所属区域
					user: '', // 联系人
					additional: '', // 附加说明
					new_account_type: '', // 收款账户
					new_collection_type: '', // 收款类型
					new_collection_way: '', // 收款方式
					// collection_je: sum.toFixed(2), // 收款金额
					collection_je: '', // 收款金额
				}
				
				// 打开弹出框
				this.$refs.orderPopup.open()
			},
			// 关闭订单弹出框
			closeOrderPopup() {
				this.$refs.orderPopup.close()
			},
			changeInput(opt) {
				let selectParam = this.KehuList.filter(i => opt.includes(i.name))[0]
				this.form.kehuName = opt

				this.form.phone = selectParam?.addresses[0]?.phone
				this.form.kehuAddress = selectParam?.addresses[0]?.address
				this.form.tuoyunAddress = selectParam?.addresses[0]?.address2
				this.form.user = selectParam?.addresses[0]?.user
				this.form.area = selectParam?.addresses[0]?.area
			},
			handleInput(param) {
				this.form.kehuName = param
				this.debouncedGetKehu(param)
			},
			changeInput2(opt) {
				this.form.kdyw = opt
			},
			handleInput2(param) {
				this.form.kdyw = param
				this.debouncedKdPerson(param)
			},
			changeInput3(opt) {
				this.form.kehuGrade = opt
			},
			handleInput3(param) {
				this.form.kehuGrade = param
				this.debouncedGrad(param)
			},
			changeInput4(opt) {
				this.form.new_account_type = opt
				const { wholesale } = this.dataMap || {}
				let sum = (Number(wholesale) || 0) * (Number(this.num) || 0)
				this.form = {
					...this.form,
					collection_je: sum.toFixed(2), // 收款金额
				}
			},
			handleInput4(param) {
				this.form.new_account_type = param
				this.debouncedGrad(param)
			},
			changeInput6(opt) {
				this.form.new_collection_type = opt
			},
			handleInput6(param) {
				this.form.new_collection_type = param
			},
			changeInput7(opt) {
				this.form.new_collection_way = opt
			},
			handleInput7(param) {
				this.form.new_collection_way = param
			},
			changeInput5(opt) {
				this.form.additional = opt
			},
			handleInput5(param) {
				this.form.additional = param
				this.debouncedDiction(param)
			},
			
			handleImg(index) {
				this.selectIndex = index;
				this.imgList = JSON.parse(JSON.stringify(this.imgList)).map((i, j) => ({...i, active: j == this.selectIndex ? true : false}));
				this.mainUrl = this.imgList.filter((i, j) => j == index)[0].url;
			},
			handlePopup() {
				this.showPopup = true
			},
			handleArrow(type) { // 左右切换图片
				if (type == '1') {
					if (this.selectIndex <= 0) {
						return
					}
					this.selectIndex--
					this.imgList = JSON.parse(JSON.stringify(this.imgList)).map((i, j) => ({...i, active: j == this.selectIndex ? true : false}));
					this.mainUrl = this.imgList.filter((i, j) => j == this.selectIndex)[0].url;
					this.scrollToIndex();
				} else {
					if (this.selectIndex >= (this.imgList.length - 1)) {
						return
					}
					this.selectIndex++
					this.imgList = JSON.parse(JSON.stringify(this.imgList)).map((i, j) => ({...i, active: j == this.selectIndex ? true : false}));
					this.mainUrl = this.imgList.filter((i, j) => j == this.selectIndex)[0].url;
					this.scrollToIndex();
				}
			},
			handleEnter() {
                uni.navigateTo({
                     url: '../../pages/shopCar/shopCar'
                });
			},
			scrollToIndex() { // 左右切换的时候添加过渡动画效果
				this.scrollLeft = this.selectIndex * (240 + 10); 
			},
			handleMinus() {
				if (this.num <= 1) {
					return
				}
				this.num--
			},
			handleAdd() {
				this.num++
			},
			handleAddCar() {
				console.log('=== car')
			},
			async _getDetail(parma) {
				const res = await huohaoDetails(parma)
				const { data: { status, data, message  } } = res || {}
				// console.log('== 详情 11', data)

				if (status == 'success') {
					this.dataMap = data
					this.imgList = data.files.map((i, j) => ({
						...i, 
						active: j == 0 ? true : false,  
						imgurl: `${BASE_URL_IMG}${i.imgurl}`,
						url: `${BASE_URL_IMG}${i.url}`
					}));
					this.mainUrl = this.imgList.length ? this.imgList[0].url : ''
				} else if (status === 'fail') {
					uni.showToast({
						title: message,
						duration: 2000,
						icon: 'none'
					});
				} 
			},
			changeData(param) {  // img 信息弹出框
				this.showToast = true;
				this.showToastStr = param
				this.timer = setTimeout(() => {
					this.showToast = false;
					clearTimeout(this.timer)
				}, 2000)
			},
			async getKehu(str = '') { // 客户信息
				let param = {
					paging: {
						pageIndex: 1,
						pageSize: 200,
					},
					query: {
						type_nos: ["customer"],
						valid: true,
						search: str, // 搜索字段
					},
				}
				const res = await getKehuList(JSON.stringify(param))
				// console.log('==== res 客户信息', res.data)
				const { data: { data } } = res || {}
				
				this.comKehu(data.companys)
			},
			async getKdPerson(str='') { // 经手人
				let param = {
					paging: {
						pageIndex: 1,
						pageSize: 200,
					},
					query: {
						role_type_no: "wms",
						refcompany: false,
						valid: true,
						search: str, // 搜索字段
					},
				}
				const res = await getKdPersonList(JSON.stringify(param))
				const { data: { data } } = res || {}
				// console.log('== 经手人', res)
				this.comKdPerson(data.users)
			},
			async getGrad(str = '') { // 客户等级
				let param = {
					paging: {
						pageIndex: 1,
						pageSize: 200,
					},
					query: {
						dictype_no: "company_level",
						search: str, // 搜索字段
					},
				}
				const res = await getGradeList(JSON.stringify(param))
				const { data: { data } } = res || {}
				console.log('== 等级', res)
				this.comGrad(data.dictionaries)
			},
			async getQuery(str = '') { // 收款账户
				let param = {
					paging: {
						pageIndex: 1,
						pageSize: 200,
					},
					query: {
						search: str, // 搜索字段
					},
				}
				const res = await getQueryAccts(JSON.stringify(param))
				const { data: { data } } = res || {}
				let accountsList = (data.accounts || []).map(i => ({...i, str: `${i.acctNo}-${i.type}` }))
				this.comQuery(accountsList)
			},
			async getCollectType(str = '') { // 收款类型
				let param = {
					paging: {
						pageIndex: 1,
						pageSize: 2000,
					},
					query: {
						search: str, // 搜索字段
						dictype_no: 'paymentType'
					},
				}
				const res = await getCollect(JSON.stringify(param))
				const { data: { data } } = res || {}
				let arr = (data.dictionaries || [])
				console.log('== res 收款类型 ', arr)
				
				this.comCollectType(arr)
			},
			async getCollectWay(str = '') { // 收款方式
				let param = {
					paging: {
						pageIndex: 1,
						pageSize: 2000,
					},
					query: {
						search: str, // 搜索字段
						dictype_no: 'paymentMethod'
					},
				}
				const res = await getCollect(JSON.stringify(param))
				const { data: { data } } = res || {}
				let arr = (data.dictionaries || [])
				console.log('== res 收款方式 ', arr)
				
				this.comCollectWay(arr)
			},
			async getDictionaries(str = '') { // 附加说明
				let param = {
					paging: {
						pageIndex: 1,
						pageSize: 200,
					},
					query: {
						search: str, // 搜索字段
						dictype_no: 'additional_dic'
					},
				}
				const res = await getDiction(JSON.stringify(param))
				const { data: { data } } = res || {}  // text
				console.log('== 附加说明', data.dictionaries)
				this.comDiction(data.dictionaries)
			},
			...mapMutations([
                'addShopCar', 
				'comKehu',
				'comKdPerson',
                'comGrad',
				'comQuery',
				'comCollectType',
				'comCollectWay',
				'comDiction',
            ]),
		}
	}
</script>

<style lang="less" scoped>
.content {
	.top {
		position: fixed;
		width: 100%;
		z-index: 999;
	}

	.bao_td_left {
		width: 100%;
		height: 100%;
		text-align: left;
	}

	.center {
		padding-top: 280rpx;
		position: relative;

		.iconfont {
			position: absolute;
			right: 60rpx;
			top: 180rpx;
			padding: 10rpx;

			.num {
				position: absolute;
				top: -15rpx;
				right: 0rpx;
				color: red;
				font-size: 38rpx;
				z-index: 6;
			}
		}

		.right_content {
			flex: 1;
			background: #fff;
			
			.scroll_content {
				height: calc(100vh - 298rpx);
				width: 100%;
				.pro_content {
					padding: 0rpx 40rpx 40rpx;
					.top_content {
						display: flex;
						
						image {
							width: 1000rpx;
							height: 900rpx;
						}
						.right_content {
							flex: 1;
							background: #fff;
							padding: 20rpx;
						}
					}
				}

				.bottom_content {
					display: flex;
					margin-top: 20rpx;
					.left_img {
						display: flex;
						width: 1000rpx;

						/* Hide scroll bar */
						::-webkit-scrollbar {
						display: none;
						}

						/* Hide scroll bar for IE */
						-ms-overflow-style: none;
						scrollbar-width: none;

						.item_img {
							border: 1rpx solid red;
						}
						.item_img_overlay {
							background-color: rgba(255, 255, 255, 0) !important;
						}
						.image_wrapper {
							display: inline-block;
							position: relative;
							margin-right: 10px; 
						}
						.overlay {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 240rpx;
							background-color: rgba(255, 255, 255, 0.5);
						}
					}

					.rigth_btn {
						display: flex;
						justify-content: space-between;
						width: 100%;
						margin-top: 60rpx;
						button {
							width: 240rpx;
							height: 100rpx;
						}
					}
				}
			}
		}
	}
	.none {
		border: none;
	}
	.table_name {
		overflow: hidden; // 溢出的内容隐藏
		text-overflow: ellipsis; // 溢出的部分用省略号...显示
		-webkit-line-clamp: 2; // 行数
		display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 
		-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
	}

	.popup_content {
		width: 90vw;
		padding: 60rpx 10rpx;
		padding-top: 80rpx;
		background: #fff;
		font-size: 40rpx;
		font-weight: 700;
		position: relative;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		height: 70vh;

		.iconfont {
			position: absolute;
			top: 30rpx;
			right: 50rpx;
			font-size: 40rpx;
		}

		.toast {
			position: absolute;
			top: 140rpx;
			left: 400rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 40rpx;
			border-radius: 15rpx;
			background: #575757;
			color: #fff;
			font-size: 30rpx;
		}

		.bottom_btn {
			display: flex;
			justify-content: space-around;
			margin-top: 80rpx;
			
			button {
				width: 400rpx;
				height: 100rpx;
				background: #169bd5;
				color: #fff;
				margin: 0;
				font-weight: 500;
				font-size: 60rpx;
			}
		}
	}
}

.nowrap {
	white-space: nowrap;/* 给文本设置不换行在一行中显示 */
	overflow: hidden;/* 文本超出的部分隐藏 */
	text-overflow: ellipsis;/* 文本超出的部分用省略号代替 */
}
</style>
